<template>
    <div>
        <header>
			<van-nav-bar title="支付详情" left-arrow @click-left="$router.push('/cart')" />
		</header>
        <section>
            <div v-if='payStatus' class="payment-title">
                <div>
                    <van-icon name="passed" />
                    <h4>订单支付成功</h4>
                    <span class="span-title">我们将尽快为您发货，收货期间请保持手机畅通</span>
                </div>
                
                    <van-button round type="info" @click="$router.push('/myOrder')">查看订单</van-button>
                    <van-button round type="default" @click="$router.push('/home')">进入首页</van-button>
                
            </div>
            <!-- <div v-else class="payment-title">
                <div>
                    <van-icon name="close" />
                    <h4>订单支付失败</h4>
                    <span class="span-title">订单错误，请重新下单</span>
                </div>
                <van-button round type="info" @click="$router.push('/home')">进入首页</van-button>
            </div> -->
        </section>
    </div>
    
</template>

<script>
import http from '@/common/api/request.js'
import qs from 'qs'

export default{
    data () {
        return {
            payStatus : false
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            let datas = {
                out_trade_no:this.$route.query.out_trade_no,
                trade_no:this.$route.query.trade_no
            }
            http.$axios({
            	url:'/api/successPayment',
                method:"POST",
                headers:{
                    token:true
                },
                data:qs.stringify(datas)
            }).then(res=>{
                
                if( res.code == 2 ){
                    this.payStatus = true;
                }
            })
        }
    }
}
</script>

<style scoped>
header {
	width: 100%;
	height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
	background-color: #1b1b1b;
}

::v-deep .van-nav-bar__title {
	color: #fff;
	font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
	color: #ccc;
	font-size: 0.593333rem;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.32rem;
	/* background-color: #f5f5f5; */
}


section div {
	margin: 0.266666rem 0;
	width: 8.933333rem;
}

::v-deep .van-button__content {
    margin-top: 0px;
    width: 5.933rem;
}

.payment-title {
    margin-top: 180px;
    text-align: center;
    align-items: center;
}

.payment-title h4 {
    margin-top: 1.0rem;
    font-size: 24px;
}

.span-title {
    display: inline-block;
     margin-top: 1.0rem;
     font-size: 16px;
     color: #ccc;
}

::v-deep .van-icon {
    font-size: 100px;
}

.button-bottom {
   margin-top: 1.0rem;
}

::v-deep .van-button--normal {
    padding: 0;
    font-size: 20px;
    text-align: center;
    align-items: center;
}

::v-deep .van-button--default {
    margin-top: 0.5rem;
    color: #fff;
    background-color: #ccc;
    border: 1px solid #ccc;
}

::v-deep .van-button--info {
    margin-top: 1.0rem;
    color: #fff;
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
}
</style>